<template>
    <van-cell center title="心动模式">
        <template #right-icon>
            <van-switch v-model="isMatchMode" size="24"/>
        </template>
    </van-cell>
    <UserCardList :user-list="userList"/>
</template>

<script setup lang="ts">
    //注意区别useRoute和useRouter，两者是不同的。
    import {useRoute,useRouter} from 'vue-router'
    import {watchEffect, ref, onMounted} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showSuccessToast,showFailToast} from "vant";
    import UserCardList from '../components/UserCardList.vue'
    import qs from 'qs'
    import {getCurrentUser} from "../service/user";
    //查询字符串的解析器

    const route = useRoute();
    const router = useRouter();
    // const {tags} = route.query
    const userList = ref([]);

    const isMatchMode = ref<boolean>(false);
    const num = 10;


    //加载数据
    const loadData = async () =>{
        let userListData
        if(isMatchMode.value){
             userListData = await myAxois.get('/user/match',{
                params:{
                    num,
                },
            })
                .then(function (response) {
                    console.log("/user/recommend success",response);
                    showSuccessToast("请求成功！")
                    return response.data?.data;//records是mybatis进行分页操作所返回结果的封装
                })
                .catch(function (error) {
                    console.error("/user/recommend error",error);
                    showFailToast("请求失败！")
                });
            if(userListData){
                //因为后端存放的tags标签数据是json格式的字符，所以要将其解析成字符串的格式
                userListData.forEach(user =>{
                    if(user.tags){
                        user.tags = JSON.parse(user.tags);
                    }
                })
                userList.value = userListData
            }
        }else{
            userListData = await myAxois.get('/user/recommend',{
                params:{
                    pageSize:8,
                    pageNum:1,
                },
            })
                .then(function (response) {
                    console.log("/user/recommend success",response);
                    // showSuccessToast("请求成功！")
                    if(response.data.code === 40101){
                        router.push("/user/login")
                    }
                    return response.data?.data.records;//records是mybatis进行分页操作所返回结果的封装
                })
                .catch(function (error) {
                    console.error("/user/recommend error",error);
                    showFailToast("未登录！")
                });
            if(userListData){
                //因为后端存放的tags标签数据是json格式的字符，所以要将其解析成字符串的格式
                userListData.forEach(user =>{
                    if(user.tags){
                        user.tags = JSON.parse(user.tags);
                    }
                })
                userList.value = userListData
            }
        }

    }

    //监听isMatchMode的变化【控制心动模式开关】
    watchEffect(() =>{
        loadData();
    })
</script>

<style scoped>

</style>